{% extends 'mybase2.html' %}

{% block title %} 用户登录 {% endblock %}

{% block style %}
    {{super()}}
    <style>
        #container{
            padding-top: 30px;
            
            margin: 0 auto;
            text-align: center;
        }

        #tips {
            color: red;
            font-size: 14px;
        }
    </style>
{% endblock %}

{% block content %}
    <div id="container">
        <h1 style="text-align:center">用户登录</h1>
        <div id="tab" style="text-align:center">
            <span class="badge badge-primary" style="font-size:1.2em">用户名/密码</span> |  
            <span class="badge badge-secondary" style="font-size:1.2em">手机验证码</span>
            <p id="tips"> {{ msg }}</p>
        </div>
        
        
        {# f=1表示用户名密码登录 #}
        <div class="logintab">
            <form class="form-horizontal" action="{{ url_for('user.login') }}?fcode=1" method="post">
                <div class="form-group row" >
                    <label for="inputUsername" class="col-md-2 col-form-label">用户名</label>
                    <div class="col-md-4">
                        <input type="text" name="username" class="form-control" id="inputUsername" placeholder="请输入用户名">
                        {# 用于提示用户名是否已注册 #}
                        <span></span>
                    </div>
                </div>

                <div class="form-group row" >
                    <label for="inputPassword" class="col-md-2 col-form-label">密码</label>
                    <div class="col-md-4">
                        <input type="password" name="password" class="form-control" id="inputPassword" placeholder="请输入密码">
                    </div>
                </div>

                <div class="form-group row" >            
                    <div class="col-md-10">
                        <button type="submit"  class="btn btn-primary col-md-2">登  录</button>
                        <button type="reset" class="btn btn-primary col-md-2">重  置</button>
                    </div>
                </div>
            </form>
        </div>

        {# f=2表示手机号登录#}
       <div class="logintab">
            <p class="tips">{{ msg }} </p>
            <form class="form-horizontal" action="{{ url_for('user.login') }}?fcode=2" method="post">
                <div class="form-group row">
                    <label for="inputPhone" class="col-md-2 col-form-label">手机号</label>
                    <div class="col-md-4">
                        <input type="phone"  name="phone" class="form-control" id="inputPhone" placeholder="请输入手机号码">
                        <span></span> {# 用于提示手机号核实是否正确#}
                    </div>
                    
                </div>

                <div class="form-group row">
                    <label for="inputCode" class="col-md-2 col-form-label">验证码</label>
                    <div class="col-md-4 col-md-offset-3">
                        <input type="text" name="code" class="form-control" id="inputCode" placeholder="请输入验证码"   />
                    </div>

                    <div class="col-md-1 ">
                        <input type="text" id="btnCheck" class="btn btn-info" value="发送验证码" />
                    </div>
                </div>

                <div class="form-group row">            
                    <div class="col-md-offset-3 col-md-10">
                        <button type="submit"  class="btn btn-primary col-md-2">登  录</button>
                        <button type="reset" class="btn btn-primary col-md-2">重  置</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
{% endblock %}

{% block script %}
    {{ super() }}
    <script>

        // 发送验证码的按钮事件
        $('#btnCheck').click(function() {
            //var phone = $('input[name=phone]').val();
            let phone = $("#inputPhone").val();
            console.log(phone)
            let span_ele = $("#inputPhone").next('span');
            span_ele.css({'color':'red','font-size':'12px'});
            if(phone && phone.length == 11){
                
                // 发送ajax请求调用阿里云、腾讯云等发送短信的API
                // 发送get 请求，参数为uid -->
                $.get("{{ url_for('user.send_message') }}",{phone:phone},function(data){
                    if (data.code != 200){
                        console.log(data.msg)
                        //span_ele.css('color','red');
                        //span_ele.text(data.msg);
                    }else{
                        console.log(data.msg)
                        //span_ele.css('color','green');
                        //span_ele.text(data.msg);
                    }
                })   
            }
            else{
                span_ele.text('必须输入11位手机号码');
            }
        })

        // 显示切换登录方式
        $(function() {
            $(".logintab").hide();
            $(".logintab").first().show();
            $("#tab span").click(function(){
                $(".logintab").hide();
                $(".logintab").eq($(this).index()).show();
            })
        })
   
        // 光标离开后发送ajax请求，校验用户名是否注册到数据库中
        $('#inputUsername').blur(function() {            
            let uid = $(this).val();
            let span_ele = $(this).next('span'); // 提示手机号的长度是否为11

            
            // 发送get 请求，参数为uid -->
            $.get("{{ url_for('user.check_username') }}",{uid:uid},function(data){
                // console.log(data);
                if (data.code != 200){
                    span_ele.css('color','red');
                    span_ele.text(data.msg);
                }else{
                    span_ele.css('color','green');
                    span_ele.text(data.msg);
                }
            })
            
           
        })

        $('form').submit(function(){
            var username = $('input[name=username]').val();
            var password = $('input[name=password]').val();
            if(username == ''){
                alert('请输入用户名');
                return false;
            }
            if(password == ''){
                alert('请输入密码');
               return false;
            }
        })
    </script>
{% endblock %}